import { HtmlNode, HtmlNodeModel } from '@logicflow/core'
import BaseNode from './baseNode.vue'
import { createApp, h } from 'vue'
import Antd from 'ant-design-vue'
import { createPinia } from 'pinia'

import snowy from '@/snowy'
import i18n from '@/locales'
import router from '@/router'
import ElementPlus from 'element-plus'
import ViewUIPlus from 'view-ui-plus'
import TinyVue from '@opentiny/vue'
import { components } from '@/views/process/engine/node/components/index.js'

const NODE_WIDTH = 70
const NODE_HEIGHT = 28

// const NEXT_X_DISTANCE = 200
// const NEXT_Y_DISTANCE = 100

class BaseNodeView extends HtmlNode {
	constructor(props, component) {
		super(props)
		this.isMounted = false

		let properties = props.model.getProperties()

		this.customNode = h(component || BaseNode, {
			text: props.model.text.value,
			model: props.model,
			graphModel: props.graphModel,
			disabled: props.graphModel.editConfigModel.isSilentMode,
			isSelected: props.model.isSelected,
			isHovered: props.model.isHovered,
			isDragging: props.model.isDragging,
			properties: properties,
			updateText: (text) => {
				props.model.text.value = text
			}
		})
		// console.log(this.r)
		this.app = createApp({
			render: () => this.customNode
		})
		this.app.use(createPinia())
		this.app.use(router)
		this.app.use(Antd)
		this.app.use(i18n)
		this.app.use(snowy)
		this.app.use(TinyVue)
		this.app.use(ElementPlus)
		this.app.use(ViewUIPlus)
		for (const c of components) {
			this.app.component(c.name, c.data)
		}
		//去掉默认节点文本的展示
		// props.model.text.value = "";
	}

	shouldUpdate() {
		return true
	}

	setHtml(rootEl) {
		if (!this.isMounted) {
			this.isMounted = true
			const node = document.createElement('div')
			node.id = 'customNodeDiv_' + this.props.model.id
			node.setAttribute('class', 'baseNode')
			rootEl.appendChild(node)
			this.app.mount(node)
		} else {
			this.customNode.component.props.properties = this.props.model.getProperties()
			this.customNode.component.props.isSelected = this.props.model.isSelected
			this.customNode.component.props.isHovered = this.props.model.isHovered
			this.customNode.component.props.disabled = this.props.model.disabled
			this.customNode.component.props.isDragging = this.props.model.isDragging
			// this.r.component.props.text = this.props.model.text.value
		}
	}

	getText() {
		return null
	}

	// getAnchorShape(anchorData) {
	// 	const { x, y, type } = anchorData
	// 	return h('rect', {
	// 		x: x - 3,
	// 		y: y - 3,
	// 		width: 6,
	// 		height: 6,
	// 		className: `custom-anchor ${type === 'incomming' ? 'incomming-anchor' : 'outgoing-anchor'}`
	// 	})
	// }
}

class BaseNodeModel extends HtmlNodeModel {
	initNodeData(data) {
		super.initNodeData(data)

		const endNodeRule = {
			message: '结束节点不能连接其他节点',
			validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
				if (this.endNodeFlag(sourceNode)) {
					return false
				}
				return true
			}
		}
		this.sourceRules.push(endNodeRule)
	}

	setAttributes() {
		this.width = NODE_WIDTH
		this.height = NODE_HEIGHT
		this.text.editable = false
	}

	endNodeFlag(sourceNode) {
		return false
	}

	setHeight(val) {
		this.height = val
	}

	getOutlineStyle() {
		const style = super.getOutlineStyle()
		//	style.stroke = 'none'
		//		style.hover.stroke = 'none'
		return style
	}

	instanceNode(code) {
		return false
	}

	isDrawView() {
		return true
	}

	showRemoveIcon() {
		return true
	}

	showCopyNodeIcon() {
		return true
	}

	showAddNodeIcon() {
		return true
	}

	showPackageNodeIcon() {
		return true
	}

	showPauseNodeIcon() {
		return true
	}

	getNodeOutEdgeCode() {}

	// getDefaultAnchor() {
	// 	const { id, x, y, width, height } = this
	// 	const anchors = []
	// 	anchors.push({
	// 		x: x - width / 2,
	// 		y,
	// 		id: `${id}_incomming`,
	// 		edgeAddable: false,
	// 		type: 'incomming'
	// 	})
	// 	anchors.push({
	// 		x: x + width / 2,
	// 		y,
	// 		id: `${id}_outgoing`,
	// 		type: 'outgoing'
	// 	})
	// 	return anchors
	// }
	// addNode(node, nextY = 0) {
	// 	const isDeep = nextY !== 0
	// 	const nodeModel = this.graphModel.getNodeModelById(node.sourceId)
	// 	const leftTopX = node.x + NEXT_X_DISTANCE - 50 - 10
	// 	const leftTopY = node.y + nextY - 40 - 8
	// 	const rightBottomX = node.x + NEXT_X_DISTANCE + 50 + 10
	// 	const rightBottomY = node.y + nextY + 40 + 8
	// 	const existElements = this.graphModel.getAreaElement(
	// 		this.getHtmlPoint([leftTopX, leftTopY]),
	// 		this.getHtmlPoint([rightBottomX, rightBottomY])
	// 	)
	// 	if (existElements.length) {
	// 		this.addNode(node, nextY + NEXT_Y_DISTANCE)
	// 		return
	// 	}
	// 	const newNode = this.graphModel.addNode({
	// 		type: node.type,
	// 		x: node.x + NEXT_X_DISTANCE,
	// 		y: node.y + nextY,
	// 		properties: node.properties
	// 	})
	// 	let startPoint
	// 	let endPoint
	// 	if (isDeep) {
	// 		startPoint = {
	// 			x: node.x,
	// 			y: node.y + nodeModel.height / 2
	// 		}
	// 		endPoint = {
	// 			x: newNode.x - newNode.width / 2,
	// 			y: newNode.y
	// 		}
	// 	}
	// 	this.graphModel.addEdge({
	// 		sourceNodeId: node.sourceId,
	// 		targetNodeId: newNode.id,
	// 		startPoint,
	// 		endPoint
	// 	})
	// 	this.graphModel.selectElementById(newNode.id)
	// 	this.graphModel.showContextMenu(newNode)
	// }
}

export default {
	type: 'base-node',
	model: BaseNodeModel,
	view: BaseNodeView
}
